<template>
	<view>
		<view class="collapse"></view>
		<view class="fix-di bg-white fbox fbox-acenter fbox-jaround">
			<view class="fix-di-item fbox fbox-column fbox-acenter" @click="gohome">
				<image src="/static/tabbardetails/tabbar1.png" mode="widthFix"></image>
				<view>{{ $t('tabbardetail.home') }}</view>
			</view>
			<view class="fix-di-item fbox fbox-column fbox-acenter" @click="share">
				<image src="/static/tabbardetails/tabbar2.png" mode="widthFix"></image>
				<view>{{ $t('tabbardetail.share') }}</view>
			</view>
			<view class="fix-di-item fbox fbox-column fbox-acenter" @click="follow">
				<image src="/static/tabbardetails/tabbar3.png" v-if="isCollection == 0" mode="widthFix"></image>
				<image src="/static/tabbardetails/tabbar3-1.png" v-if="isCollection == 1" mode="widthFix"></image>
				<view>{{ $t('tabbardetail.follow') }}</view>
			</view>
			<view class="fix-di-item fbox fbox-column fbox-acenter" v-if="type == 'news'">
				<image src="/static/tabbardetails/tabbar4.png" v-if="isLike == 0" @click="goLike" mode="widthFix">
				</image>
				<image src="/static/tabbardetails/tabbar4-1.png" v-if="isLike == 1" @click="goLike" mode="widthFix">
				</image>
				<view>{{ $t('tabbardetail.Like') }}<text>{{likeNum}}</text></view>
			</view>
			<view class="fix-di-item fbox fbox-column fbox-acenter"
				v-if="type == 'information'||type=='business'||type=='telBook'" @click="google">
				<image src="/static/tabbardetails/tabbar6.png" mode="widthFix"></image>
				<view>{{ $t('tabbardetail.location') }}</view>
			</view>
			<view class="fix-di-item fbox fbox-column fbox-acenter" @click="contactus()" v-if="type == 'goods'">
				<image src="/static/tabbardetails/tabbar7.png" mode="widthFix"></image>
				<view>{{ $t('tabbardetail.contactus') }}</view>
			</view>
			<view class="fix-di-item fbox fbox-column fbox-acenter" @click="gocomment()">
				<image src="/static/tabbardetails/tabbar5.png" mode="widthFix"></image>
				<view>{{ $t('tabbardetail.comment') }}<text>{{commentlength}}</text></view>
			</view>
		</view>
		<view class="share" v-if="show">
			<view class="poster bg-white">
				<view class="poster-bg">
					<image src="/static/tabbardetails/share_bg.png" mode="widthFix"></image>
				</view>
				<view class="share-zi f28 color3">
					sally yap11233 hdhjd dhdjj ebjeyoavs snls rfjcid ...
				</view>
				<view class="share-info fbox fbox-jbetween fbox-end">
					<view class="info fbox fbox-acenter">
						<image src="/static/logo.png" mode="widthFix"></image>
						<text class="f30">Yap Sally</text>
					</view>
					<view class="img">
						<image src="/static/tabbardetails/qr.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="share-type bg-white">
				<view class="two fbox fbox-acenter fbox-jaround">
					<view class="two-item fbox fbox-column fbox-acenter" @click="shareimg()">
						<image src="/static/login/wx.png" mode="widthFix"></image>
						<text>Sharing with Wechat</text>
					</view>
					<view class="two-item fbox fbox-column fbox-acenter">
						<image src="/static/tabbardetails/fookbook.png" mode="widthFix"></image>
						<text>Sharing with Wechat</text>
					</view>
				</view>
				<view class="share-btn" @click="close">
					Cancel Sharing
				</view>
			</view>
		</view>
		<contact v-if="contshow == true" @hide="hidecont"></contact>
	</view>
</template>

<script>
	import contact from "@/components/contact.vue"
	export default {
		components: {
			contact,
		},
		name: "tabbar",
		data() {
			return {
				show: false,
				contshow: false
			};
		},
		props: {
			type: {
				type: String,
				default: ""
			},
			commentlength: {
				type: Number,
				default: 0
			},
			isLike: {
				type: Number,
				default: 0
			},
			isCollection: {
				type: Number,
				default: 0
			},
			likeNum: {
				type: String,
				default: ""
			},
			id: {
				type: String,
				default: ""
			},
			top: {
				type: Number,
				default: 0
			},
			lat: {
				type: String,
				default: ""
			},
			lng: {
				type: String,
				default: ""
			},
		},
		created() {
			this.followinfo()
		},
		methods: {
			shareimg() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			hidecont() {
				this.contshow = false
			},
			contactus() {
				this.contshow = true
			},
			google() {
				console.log(this.lat, this.lng)
				uni.navigateTo({
					url: '/pages/Google/index?lat=' + this.lat + '&lng=' + this.lng
				})
			},
			gocomment() {
				uni.pageScrollTo({
					scrollTop: 9999,
					duration: 0
				})
			},
			followinfo() {

			},
			follow() {
				uni.showLoading({
					mask: true
				})
				const params = {}
				if (this.type == 'news') {
					params.id = this.id
					params.map = 'applet_information_collection'
				}
				if (this.type == 'information') {
					params.map = 'applet_city_post_collection'
					params.pid = this.id
				}
				if (this.type == 'goods') {
					params.map = 'applet_mall_goodsCollect'
					params.gid = this.id
				}
				if (this.type == 'business') {
					params.map = 'applet_city_shop_collection'
					params.sid = this.id
				}
				if (this.type == 'telBook') {
					params.map = 'applet_mobile_set_record'
					params.sid = this.id
					params.type = "collect"
				}
				console.log(params)
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						uni.hideLoading()
						uni.showToast({
							title: res.data.data.msg,
							icon: "none"
						})
						this.$emit("init")
					} else {
						uni.hideLoading()
					}
				})
			},
			goLike() {
				uni.showLoading({
					mask: true
				})
				const params = {
					map: 'applet_information_like',
					aid: this.id
				}
				console.log(params)
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						uni.hideLoading()
						uni.showToast({
							title: res.data.data.msg,
							icon: "none"
						})
						this.$emit("init")
					} else {
						uni.hideLoading()
					}
				})
			},
			share() {
				this.show = true
			},
			close() {
				this.show = false
			},
			gohome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="less">
	.share {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		background-color: rgba(0, 0, 0, .4);

		.poster {
			position: fixed;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 30rpx;
			// box-sizing: border-box;
			width: 80%;
			border-radius: 30rpx;

			.poster-bg {
				margin: 0rpx auto;

				image {
					width: 100%;
				}
			}

			.share-zi {
				margin-top: 10rpx;
			}

			.share-info {
				.info {
					image {
						width: 50rpx;
						margin-right: 10rpx;
					}

					text {
						color: #606477;
					}
				}

				.img {
					image {
						width: 100rpx;
					}
				}
			}
		}

		.share-type {
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 40rpx 0;
			border-radius: 40rpx 40rpx 0 0;

			.two {
				.two-item {
					image {
						width: 110rpx;
					}

					text {
						margin-top: 10prx;
						font-size: 26rpx;
						color: #6f6f6f;
					}
				}
			}

			.share-btn {
				border: 1px solid #e0f0ff;
				color: #2497ff;
				width: 90%;
				margin: 40rpx auto 0rpx;
				padding: 30rpx 0;
				text-align: center;
				border-radius: 50rpx;
			}
		}
	}

	.collapse {
		height: 150rpx;
	}

	.fix-di {
		width: 100%;
		position: fixed;
		bottom: 0;
		box-shadow: 0 0 10rpx 10rpx #f6f6f6;
		padding: 20rpx 0;

		.fix-di-item {
			position: relative;

			image {
				width: 40rpx;
			}

			view {
				font-size: 22rpx;
				color: #686868;
				margin-top: 10rpx;

				text {
					background-color: #ff4e31;
					color: #FFFFFF;
					padding: 2rpx 10rpx;
					border-radius: 40rpx;
					position: absolute;
					top: -20rpx;
					right: -30rpx;
				}
			}
		}
	}
</style>
